<template>
  <div>
    <!-- <p>筛选</p> -->
    <!-- <div class="select">
      <el-select v-show="false" v-model="name" placeholder="请选择">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <p style="margin-left: 40px">数据</p>
      <el-select v-model="data" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button plain class="btn" @click="select()">查询</el-button>
    </div> -->
    <!--echarts的容器-->
    <div
      v-loading="loading"
      id="main"
      style="width: 100%; height: 520px; background: #fff"
    ></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
// import { postKeyValueRequest } from "../utils/api";
import axios from "axios";
export default {
  name: "ChartPage",
  data() {
    return {
      charts: "",
      waterlevels: [],
      rains: [],
      time: [],
      loading: true,
      options1: [
        //监测站
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      options2: [
        //数据
        //index,Unnamed: 0,times,temperature,humidity,winddirection,windpower,rains,
        //rains7041JA23,waterlevels7041JA23,rains7041JA24,waterlevels7041JA24,waterlevels
        {
          value: "3",
          label: "温度",
        },
        {
          value: "4",
          label: "湿度",
        },
        {
          value: "5",
          label: "风向",
        },
        {
          value: "6",
          label: "风力",
        },
        {
          value: "7",
          label: "降雨量",
        },
        {
          value: "8",
          label: "附近点1降雨量",
        },
        {
          value: "9",
          label: "附近点1水位",
        },
        {
          value: "10",
          label: "附近点2降雨量",
        },
        {
          value: "11",
          label: "附近点2水位",
        },
        {
          value: "12",
          label: "水位",
        },
      ],
      name: "",
      data: "",
      yuce: [],
    };
  },
  methods: {
    //查询
    select() {
      axios.post("/getChart").then((res) => {
        let data1 = [];
        let data2 = [];
        let time = [];
        console.log(res)
        res.forEach((element) => {
          data2.push(element.rains);
          data1.push(element.waterlevels);
          time.push(element.time);
        });
        this.waterlevels = data1;
        this.rains = data2
        this.time = time
        this.loading = false;
        this.drawLine("main");
      }); 
      
    },
    //曲线图
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          top: "5%",
          left: 'center',
          text: "降雨量和水位",
        },
        tooltip: {
          trigger: "axis",
          // axisPointer:{
          //   type:"cross"
          // }
        },
        grid: {
          top: "25%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          data: ["降水量", "水位"],
          left: 90,
          top: 50
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { onZero: false },
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: this.time.map(function (str) {
            return str.replace(" ", "\n");
          }), //x坐标的名称
          // data: [] //x坐标的名称
        },
        yAxis: [
          {
            name: "水位",
            type: "value",
            
          },
          {
            name: "降水量",
            type: "value",
            inverse: true,
            // splitNumber:12, //纵坐标数
            // interval: 0.5, //强制设置坐标轴分割间隔
          },
          
        ],
        dataZoom: {
          //放大缩小
          type: "inside",
        },
        series: [
          {
            name: "降水量",
            type: "bar", //折线图line;柱形图bar;饼图pie
            yAxisIndex: 1,
            data: this.rains,
          },
          {
            name: "水位",
            type: "line", //折线图line;柱形图bar;饼图pie
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },
            data: this.waterlevels,
          },
        ],
      });
    },
  },
  //调用
  mounted() {
    this.select();
  },
};
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.select {
  display: flex;
  justify-content: center;
}
.select p {
  font-size: 17px;
  line-height: 40px;
  margin-right: 20px;
}
.select .btn {
  margin-left: 20px;
  height: 40px;
  width: 60px;
}
</style>